<script lang="ts" setup>
import { useUserAddress } from '@/stores/user-address'
import { onShow } from '@dcloudio/uni-app'

import { ref } from 'vue'


const userAddress = useUserAddress()
const userAddressStore = ref(userAddress.addressData)


// 修改学生信息页
const handReviseUserAddress = () => {
    uni.navigateTo({
        url: '/pages-sub/service-module/address-change',
    })
}

onShow(() => {
  userAddressStore.value = userAddress.addressData
})

</script>

<template>
    <view class="userData">

        <!-- 条件渲染 -->
        <view v-if="!userAddressStore?.user" class="empty-address">
            暂未填写地址
        </view>

        <view v-else>
            <view class="userData-text">
                <h1 class="userData-text-h1">{{ userAddressStore.user }}</h1>
                <text class="userData-text-phone">{{ userAddressStore.telephone }}</text>
            </view>
            <text>{{ userAddressStore.dormitory }}</text>
        </view>

        <view @click="handReviseUserAddress">
            <uni-icons custom-prefix="iconfont" color="#0c101c" type="icon-a-xiugaixiugaiziliao1" size="24"></uni-icons>
        </view>
    </view>
</template>


<style lang="scss" scoped>
.userData {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $uni-text-color-inverse ;
    padding: $uni-padding1;
    border-radius: $uni-border-radius;
    box-shadow: $uni-box-shadow;

    &-text {
        display: flex;
        gap: 30rpx;
        margin-bottom: 10rpx;

        &-h1 {
            font-size: 35rpx;
            font-weight: 700;
        }

        &-phone {
            font-size: 30rpx;
        }
    }
}
</style>